<template>
    <div class="app-container" style="height:calc(100vh - 114px)">
        <el-form ref="formRef" :inline="true" :model="form" style="width:100%">
            <el-row :gutter="20" style="height: 100%;">
                <el-col :span="12" style="height: 180px;width:100%;" class="mb-3">
                    <el-card style="height: 100%;position:relative">
                        <div style="display: flex;display: -webkit-flex;align-items: center;background: #5471E5;
                        color: white;padding:10px 20px;position: absolute;left: 0;top: 0;z-index: 2;border-radius: 0 0 10px 0;">
                            <el-icon class="me-2"><Notebook /></el-icon><span>档案借读</span>
                        </div>
                        <el-row :gutter="20" style="height: 100%;">
                            <el-col :span="12" style="text-align: center;">
                                <el-image src="/public/shuaka.png" style="height:150px"></el-image>
                            </el-col>
                            <el-col :span="10" style="display: flex;display: -webkit-flex;flex-direction: column;align-items: center;">
                                <h3 class="me-3 mb-3 mt-3" >第一步：扫描条形码</h3>
                                <el-input v-model="form.casecode"
                                clearable
                                class="mb-3"
                                @keyup.enter="handleEnter"
                                    style="width: 15vw;"/>
                                <el-button type="primary" @click="duqu">读取</el-button>
                            </el-col>
                            <el-col :span="2">
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            
                <el-col :span="12" style="height: 180px;width:100%;text-align: center;" class="mb-3">
                    <el-card style="height: 100%">
                                <el-image src="/public/chenggong.png" style="height: 100px;"></el-image>
                                <h3 class="mt-3">承办人：张毅</h3>
                    </el-card>
                </el-col>
            <el-col :span="24" style="height: 66px;width:100%" class="mb-3">
                <div style="width:100%;display: flex;display: -webkit-flex;align-items: center;">
                <div class="imgbox me-3">
                    <el-image src="/public/ma.png" style="width:60%;height:60%"></el-image>
                </div>
                <h3 class="me-3" >第一步：扫描存放位置</h3>
                <el-input v-model="form.position"
                clearable 
                @clear="getTableDataLists"
                ref="positionInput"
                @keyup.enter="handleEnterPosition"
                style="width: 15vw;"/>
                </div>
            </el-col>
            <el-col :span="24" class="mb-3">
            <el-table
                v-loading="loading"
                :data="TablesData"
                show-overflow-tooltip
                style="height: 250px;"
            >
                <el-table-column label="申请借阅人" prop="name"/>
                <el-table-column label="申请时间" prop="casetype"/>
                
                <el-table-column label="部门受案号" prop="userName"/>
                <el-table-column label="案件名称" prop="casetype"/>
                <el-table-column label="赃证物类别" prop="casetype"/>
                <el-table-column label="借出时间" prop="casetype"/>
                <el-table-column label="实际归还时间" prop="casetype"/>
                <el-table-column fixed="right" align="center" label="操作" width="140">
                    <template #default="scope">
                        <el-button
                            link size="small"
                            type="danger"
                            @click="deleteData(scope.row)">
                            <el-icon class="me-1">
                                <Delete/>
                            </el-icon>
                            删除
                        </el-button>    
                    </template>
                </el-table-column>
            </el-table>
            <!-- <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getTableDataLists"
            />
            -->
            </el-col>
            <el-col :span="24" style="display: flex;justify-content:center;">
            <el-button size="large" class="me-5" type="primary" @click="submitHandle" :disabled="isdisabled">确认归还</el-button>
            <el-button size="large" type="danger" @click="cancel" :disabled="isdisabled">取消归还</el-button>
            </el-col>
      </el-row>
    </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  const { proxy } = getCurrentInstance();
  import PageEnum from "@/enum/PageEnum.js";
  const loading = ref(false)
  const isdisabled = ref(false)
  
  const form = ref({})
  const positionInput = ref(null);
  const TablesData = ref([
      {name:'111',peoplename:"张三"},
      {name:'222',peoplename:"李四"},
      {name:'333',peoplename:"王五"},
      {name:'111',peoplename:"张三"},
      {name:'222',peoplename:"李四"},
      {name:'333',peoplename:"王五"},
      {name:'111',peoplename:"张三"},
      {name:'222',peoplename:"李四"},
      {name:'333',peoplename:"王五"},
  ])
  const queryParams = ref({
      name: '',
      casecode: '',
      // 页码
      pageNum: 1,
      // 分页数量
      pageSize: PageEnum.SIZE
  })
  const total = ref(0)
  const utterance = ref(null)
  // 监控 casecode 的变化
  // watch(() => form.value.casecode, (newVal) => {
  //   // 检查新的值是否是6位数字
  //   if (/^\d{6}$/.test(newVal)) {
  //     console.log(33333);
  //   }
  // });
  onMounted(() => {
    nextTick(() => {
      newPlayVoice()
    })
  });
  // 创建播放语音
  const newPlayVoice = async () => {
    // 创建语音合成对象
    utterance.value = new SpeechSynthesisUtterance();
    // 设置语音参数
    utterance.value.lang = 'zh-CN';  // 中文
    utterance.value.volume = 1;      // 音量（范围 0 到 1）
    utterance.value.rate = 1;        // 语速（范围 0.1 到 10）
    utterance.value.pitch = 1;       // 音调（范围 0 到 2）
  }
  // 处理回车事件的函数
  const handleEnter = () => {
    console.log(1);  // 输出2
    // 将焦点移到第二个输入框
    if (positionInput.value) {
      positionInput.value.focus();
    }
  };
  // 处理回车事件的函数
  const handleEnterPosition = () => {
    console.log(2);  // 输出2
    // 将焦点移到第二个输入框
    if (positionInput.value) {
      positionInput.value.focus();
    }
  };
  // 获取案件列表
  const getTableDataLists = async () => {
      // loading.value = true
      // await getCaseInfoList(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
      //     loading.value = false;
      //     TablesData.value = res.rows
      //     total.value = res.total;
      // });
  }
  
  // 播放卷宗扫码成功语音
  const playSussVoice = async () => {
    // 设置文本内容
     utterance.value.text = "卷宗扫码成功";  
    // 停止当前播放的语音（如果有）
    speechSynthesis.cancel();
  
    // 播放语音
    speechSynthesis.speak(utterance.value);
  }
  // 播放卷宗扫码成功语音
  const playErrorVoice = async () => {
    // 设置文本内容
     utterance.value.text = "存放点扫码成功";  
    // 停止当前播放的语音（如果有）
    speechSynthesis.cancel();
    // 播放语音
    speechSynthesis.speak(utterance.value);
  }
  
  
  const submitHandle = async () => {
    
  }
  const cancel = async () => {
    
    }
  
  </script>
  <style scoped>
      .imgbox{width:66px;height: 66px;background: #5471E5;border-radius: 33px;display: flex;display: -webkit-flex;align-items: center
      ;justify-content: center;}
      h3{font-weight: bold;margin: 0;}
      :deep() .el-card__body{height: 100%;}
  </style>